<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DataTransfer</title>
</head>

<body>
  <style>
    .container {
      display: flex;
    }

    .container #drop_area {
      flex: 1;
      border: 1px dashed dodgerblue;
      min-height: 500px;
    }

    .container #drop_area img {
      border: 1px solid magenta;
      margin: 4px;
      object-fit: contain;
      height: 100px;
    }

  </style>
  <h1>Drop Images Below</h1>
  <pre><code>event.dataTransfer.files</code></pre>
  <div class="container">
    <div id="drop_area" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)"></div>
  </div>

  <script>
    const dropArea = document.getElementById("drop_area");
    const video = document.getElementById("video");

    function dragoverHandler(ev) {
      ev.preventDefault();
    }
    function dropHandler(ev) {
      const files = ev.dataTransfer.files;
      ev.preventDefault();
      if (files.length > 0) {
        parseImageAsDataURL(files[0], (dataUrl) => {
          appendImage(dataUrl, dropArea)
        })
      }
    }

    function parseImageAsDataURL(img, cb) {
      const reader = new FileReader();
      reader.onload = function () {
        cb(reader.result);
      }
      reader.readAsDataURL(img);
    }

    function appendImage(src, target) {
      const img = document.createElement('img');
      img.src = src;
      target.appendChild(img);
    }

  </script>
</body>

</html>
